<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>模拟时钟</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
        }

        .clock {
            position: relative;
            width: 300px;
            height: 300px;
            border: 8px solid #000;
            border-radius: 50%;
            background: #fff;
        }

        /* 小时数字 */
        .number {
            position: absolute;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            transform-origin: center center;
        }

        /* 24 小时数字（红色） */
        .number24 {
            position: absolute;
            font-size: 12px;
            color: red;
            text-align: center;
            transform-origin: center center;
        }

        /* 指针样式 */
        .hand {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 0% 50%;
            transform: rotate(90deg);
        }

        .hour {
            width: 80px;
            height: 4px;
            background: black;
        }

        .minute {
            width: 110px;
            height: 3px;
            background: black;
        }

        .second {
            width: 130px;
            height: 2px;
            background: red;
        }

        /* 中心点 */
        .center {
            position: absolute;
            width: 12px;
            height: 12px;
            background: #000;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
    </style>
</head>

<body>
    <div class="clock" id="clock">
        <div class="hand hour" id="hour"></div>
        <div class="hand minute" id="minute"></div>
        <div class="hand second" id="second"></div>
        <div class="center"></div>
    </div>

    <script>
        const clock = document.getElementById('clock');
        const radius12 = 125; // 12 小时数字半径
        const radius24 = 100; // 24 小时数字半径

        // 绘制 12 小时数字
        for (let i = 1; i <= 12; i++) {
            const angle = (i - 3) * (360 / 12) * Math.PI / 180;
            const x = 150 + radius12 * Math.cos(angle);
            const y = 150 + radius12 * Math.sin(angle);

            const el = document.createElement('div');
            el.className = 'number';
            el.style.left = x + 'px';
            el.style.top = y + 'px';
            el.style.transform = 'translate(-50%, -50%)';
            el.innerText = i;
            clock.appendChild(el);
        }

        // 绘制 24 小时数字
        for (let i = 13; i <= 24; i++) {
            const angle = (i - 3) * (360 / 12) * Math.PI / 180;
            const x = 150 + radius24 * Math.cos(angle);
            const y = 150 + radius24 * Math.sin(angle);

            const el = document.createElement('div');
            el.className = 'number24';
            el.style.left = x + 'px';
            el.style.top = y + 'px';
            el.style.transform = 'translate(-50%, -50%)';
            el.innerText = i;
            clock.appendChild(el);
        }

        function updateClock() {
            const now = new Date();
            const seconds = now.getSeconds();
            const minutes = now.getMinutes();
            const hours = now.getHours();

            const secondDeg = (seconds / 60) * 360;
            const minuteDeg = (minutes / 60) * 360 + (seconds / 60) * 6;
            const hourDeg = (hours % 12) / 12 * 360 + (minutes / 60) * 30;

            document.getElementById('second').style.transform = `rotate(${secondDeg}deg)`;
            document.getElementById('minute').style.transform = `rotate(${minuteDeg}deg)`;
            document.getElementById('hour').style.transform = `rotate(${hourDeg}deg)`;
        }

        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>

</html>